<template>
  <div class="form">
    <yk-space size="xl" dir="vertical">
      <input type="text" class="form__title" placeholder="请输入标题" v-model="formData.title">
      <yk-space align="center">
        <div class="subset">
          <input type="text" placeholder="选择分类" disabled v-model="subsetName" style="width: 110px; line-height: 28px;">
          <IconDownOutline></IconDownOutline>
          <yk-dropdown @selected=subsetSelect>
            <yk-dropdown-item v-for="item in subsetList" :key="item.id" :value="item.id">{{ item.name
            }}</yk-dropdown-item>
          </yk-dropdown>
        </div>
        <yk-space align="center" size="s">
          <yk-tag v-for="(tag, index) in formData.label" :key="index" shape=round closeable @close="deleteLabel(tag)">
            {{ tag }}
          </yk-tag>
          <yk-text type="third" @click="showLabel" style="cursor: pointer; white-space: nowrap;"
            v-show="formData.label!.length < 3">
            插入标签
          </yk-text>
        </yk-space>
      </yk-space>
      <div :class="{ introduce: props.classify === 0 }" style="width: 100%;">
        <yk-text-area v-model="formData.introduce" :max-length="800" placeholder="请输入简介"
          :auto-size="raws"></yk-text-area>
      </div>
    </yk-space>
    <div class="form__cover" v-if="props.classify === 0">
      <yk-upload :upload-url="uploadUrl" :file-list="fileUrl" :limit="1" accept="image/*" desc="封面800x600"
        @handleSuccess="handleSuccess"></yk-upload>
    </div>
    <yk-modal v-model="visible" title="标签" size="s" :show-footer="false">
      <yk-space dir="vertical" size="l">
        <yk-input v-model="inputValue" placeholder="请输入标签回车确定" style="width: 280px;" @submit="addLabel"></yk-input>
        <yk-space size="m">
          <yk-tag v-for="(tag, index) in formData.label" :key="index" shape=round closeable @close="deleteLabel(tag)">
            {{ tag }}
          </yk-tag>
        </yk-space>
        <yk-space wrap size="s" style="padding-top: 8px;">
          <yk-tag v-for="(tag, index) in labelArr" :key="index" shape=round style="cursor: pointer;"
            @click="selectLabel(tag)">
            {{ tag }}
          </yk-tag>
        </yk-space>
      </yk-space>
    </yk-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { useSubset } from '@/hooks/subset';
import { useLabel } from '@/hooks/label';
import { useSubsetStore } from '@/stores/subset';
import { baseUrl, baseImgPath } from '@/utils/env';

import { useCode } from '@/hooks/code';
import type { FormData } from '@/utils/interface';
const { tackleCode } = useCode()
const subsetStore = useSubsetStore()

type FormProps = {
  classify: number,
  form?: FormData

}

const props = withDefaults(defineProps<FormProps>(), {
  classify: 0
})



const { rawSubset } = useSubset('')
const { rawLabel, label, inputValue, confirm } = useLabel()
const emits = defineEmits(['formData'])

const formData = ref<FormData>({
  title: '',
  subset_id: -1,
  label: [],//标签
  introduce: '',//简介
  cover: '',
  classify: props.classify,
})

// 简介行数
const raws = computed(() => {
  if (props.classify === 1) {
    return { minRows: 24, maxRows: 30 }
  } else {
    return { minRows: 4, maxRows: 10 }
  }
})

// 分类名称
const subsetName = ref()
// 分类选择
const subsetSelect = (e: number) => {

  formData.value.subset_id = e;
  nowSubset(e)
}

// 当前分类
const nowSubset = (e: number) => {
  for (let i = 0; i < subsetList.value.length; i++) {
    if (e === subsetList.value[i].id) {
      subsetName.value = subsetList.value[i].name
    }
  }
}

// 获取分类名称
const subsetList = ref()

// 标签
// 所有标签
const labelArr = ref<string[]>([])



// 标签弹窗
const visible = ref<boolean>(false)

const showLabel = () => {
  visible.value = true
}

// 添加标签
const addLabel = () => {
  if (inputValue.value && formData.value.label!.length < 3) {
    confirm()
    formData.value.label!.push(inputValue.value)
  }
}
// 选择标签
const selectLabel = (e: string) => {
  if (formData.value.label!.length < 3) {
    formData.value.label!.push(e)
    labelArr.value = labelArr.value.filter((item: string) => item !== e)
  }
}

// 删除标签
const deleteLabel = (e: string) => {
  labelArr.value.unshift(e)
  formData.value.label = formData.value.label!.filter((item: string) => item !== e)
}

// 封面
const uploadUrl = `${baseUrl}/upload`
const fileUrl = ref<{ name: string, url: string }[]>([])

// 封面上传成功
const handleSuccess = (res: any) => {
  if (tackleCode(res.code)) {
    const photoUrl = {
      name: res.data.file_name,
      url: baseImgPath + '/' + res.data.url
    }
    fileUrl.value.push(photoUrl)
    formData.value.cover = res.data.url
  }

}

watch(formData, (e) => {
  emits('formData', e)
},
  {
    deep: true,
  })

watch(
  () => subsetStore.data,
  (e) => {
    subsetList.value = e
    if (formData.value.subset_id) {
      nowSubset(formData.value.subset_id)
    }
  },
  { immediate: true }
)

watch(
  () => label.value,
  (e: any) => {
    for (let i = 0; i < e.length; i++) {
      labelArr.value.push(e[i].label_name)
    }
  },
  { immediate: true }
)

watch(
  () => props.form,
  (e) => {
    formData.value = e!
    if (formData.value.cover) {
      const photoUrl = {
        name: '',
        url: baseImgPath + '/' + formData.value.cover
      }
      fileUrl.value = [photoUrl]
    }
    if (formData.value.subset_id && subsetList.value) {
      nowSubset(formData.value.subset_id)
    }
  }
)

onMounted(() => {
  rawSubset(props.classify)
  rawLabel()
})
</script>

<style lang="less" scoped>
.form {
  position: relative;
  padding-top: @space-xl;

  input {
    border: none;
    background: transparent;
    outline: none;

    &::placeholder {
      color: @gray-4;
    }
  }

  &__title {
    font-size: @size-xl;
    font-weight: 600;
  }

  .yk-dropdown {
    position: absolute;
    top: 0;

    :deep(.yk-dropdown__title) {
      width: 120px;
      // opacity: 0;
      height: 24px;
    }
  }

  .yk-text-area {
    border: none;
    border-radius: 0;
    background-color: transparent;
    padding: 0;
  }

  .introduce {
    border-bottom: 1px solid @gray-2;
  }

  &__cover {
    position: absolute;
    top: 0;
    right: 0;
  }

  :deep(.yk-upload__picture-button) {
    width: 160px;
    height: 120px;
  }

  :deep(.yk-upload-picture) {
    width: 160px;
    height: 120px;
  }

  :deep(.yk-upload__picture) {
    width: 160px;
    height: 120px;
  }
}
</style>
